<template>
  <div class="app-container">
    <el-row>
      <el-input
        size="medium"
        placeholder="编码、名称、地址、备注"
        suffix-icon="el-icon-search"
        style="width: 250px"
        v-model="query.s"
        @keyup.enter.native="loadCompanyLs"
      >
      </el-input>
      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="loadCompanyLs">搜索</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        {{ $t("table.add") }}
      </el-button>
    </el-row>
    <el-row>
      <el-table :data="ls" style="width: 100%" v-loading="loading">
        <el-table-column prop="code" label="编码"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="lv" label="医院等级"> </el-table-column>
        <el-table-column prop="br" label="基础费率"> </el-table-column>
        <el-table-column prop="dfcoe" label="差异系数"> </el-table-column>
        <el-table-column prop="dfcoe_wk" label="外科组差异系数" width="130"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="mark" label="备注"> </el-table-column>
        <el-table-column prop="ctime" label="时间"> </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="230"
          class-name="fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button
              icon="el-icon-edit"
              @click="handlModify(row)"
              circle
            ></el-button>
            <el-button
              icon="el-icon-delete"
              @click="delCompany(row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.size"
        @pagination="loadCompanyLs"
      />
    </el-row>
    <el-dialog title="编辑单位信息" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="tmpCompanyModel"
        :close-on-click-modal="false"
        label-position="left"
        label-width="110px"
        style="width: auto; margin-left: 50px"
      >
        <el-form-item label="编码" prop="code">
          <el-input v-model="tmpCompanyModel.code" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="tmpCompanyModel.name" />
        </el-form-item>
        <el-form-item label="医院等级" prop="lv">
          <el-select v-model="tmpCompanyModel.lv" placeholder="请选择">
            <el-option
              v-for="item in ['三级', '二级', '一级', '未知']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基础费率" prop="br">
          <el-input v-model="tmpCompanyModel.br" />
        </el-form-item>
        <el-form-item label="差异系数" prop="dfcoe">
          <el-input v-model="tmpCompanyModel.dfcoe" />
        </el-form-item>
        <el-form-item label="外科组差异系数" prop="dfcoe_wk">
          <el-input v-model="tmpCompanyModel.dfcoe_wk" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="tmpCompanyModel.address"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入地址"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="tmpCompanyModel.mark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="editData">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  compayLs,
  saveCompany,
  destoryCompany,
  sysPermission,
} from "@/api/users";
import Pagination from "@/components/Pagination/index.vue";
import { cloneDeep } from "lodash";
import { Form } from "element-ui";
import { parseTime } from "@/utils";
@Component({
  name: "SysCompany",
  components: {
    Pagination,
  },
})
export default class extends Vue {
  private query = {
    s: "",
    page: 1,
    size: 10,
  };
  private total = 0;

  private ls: Array<any> = [];
  private defaultCompanyModel = {
    // id: 0,
    code: "",
    name: "",
    address: "",
    mark: "",
    del: false,
    ctime: parseTime(new Date()),
    br: 65,
    dfcoe: 0.7,
  };
  private tmpCompanyModel = cloneDeep(this.defaultCompanyModel);

  /**
   *编辑公司信息
   */
  private editData() {
    (this.$refs.dataForm as Form).validate(async (valid) => {
      if (valid) {
        const model = this.tmpCompanyModel;
        const { data } = await saveCompany(model);
        this.$message({
          message: "操作成功",
          type: "success",
        });
        this.dialogFormVisible = false;
        this.ls.push(data.data);
        this.tmpCompanyModel = cloneDeep(this.defaultCompanyModel);
        this.loadCompanyLs();
      }
    });
  }

  private rules = {
    code: [
      {
        required: true,
        message: "编码不能为空且要保持唯一",
        trigger: "change",
      },
      { min: 3, max: 255, message: "编码长度在3到255个字符", trigger: "blur" },
    ],
    name: [
      { required: true, message: "名称不能为空且要保持唯一", trigger: "blur" },
      { min: 3, max: 500, message: "名称长度在3到500个字符", trigger: "blur" },
    ],
    lv: [{ required: true, message: "不能为空", trigger: "blur" }],
  };

  private loading = true;
  private async loadCompanyLs() {
    let d = await compayLs(this.query);
    this.ls = d.data.content;
    this.total = d.data.totalElements;
    this.loading = false;
  }
  private dialogFormVisible = false;
  private handleCreate() {
    this.tmpCompanyModel = cloneDeep(this.defaultCompanyModel);
    this.dialogFormVisible = true;
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate();
    });
  }
  private handlModify(row: any) {
    this.dialogFormVisible = true;
    this.tmpCompanyModel = cloneDeep(row);
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate();
    });
  }

  private delCompany(row: any) {
    this.$confirm("删除将不可恢复，您确定要删除吗？").then(async (val: any) => {
      let d = await destoryCompany([row.id]);
      this.query.page = 1;
      this.loadCompanyLs();
      this.$message({
        message: "删除成功",
        type: "success",
      });
    });
  }

  mounted() {
    this.loadCompanyLs();
  }
}
</script>
<style lang="scss" scoped>
.pagination-container {
  float: right;
}
</style>